<template>
    <div>
        <el-form>
            <slot name="header"></slot>
            <el-form-item style="background-color: aquamarine" label="昵称">
                <el-input v-model="basic.nickName" style="background-color: azure"></el-input>
            </el-form-item>
            <el-form-item style="background-color: gray" label="age">
                <el-input v-model.number="basic.age" style="background-color: bisque"></el-input>
            </el-form-item>
            <el-form-item :style="color">
                <el-button type="primary" @click="changeColor">变色</el-button>
                <el-button type="warning" @click="picker">{{buttonName}}</el-button>
                <el-button type="primary" @click="kicker">变色</el-button>
            </el-form-item>
            <slot name="footer" :subName="buttonName" :left="basic.nickName" :right="basic.age"></slot>
        </el-form>

    </div>
</template>

<script>
    export default {
        props:{
            buttonName:String,
            changeColor:Function,
        },
        /*beforeCreate(){
            this.buttonName=''
        },*/
        data: function () {
            return {
                basic:{
                    nickName:'nice',
                    age: 30
                },
                color:'background-color: gray'
            }
        },
        computed: {},
        methods: {
            picker:function () {
                this.color =
                    this.color ==='background-color: aquamarine'?'background-color: gray':'background-color: aquamarine'
            },
            kicker:function () {
                this.$emit('rightClick');
            }
        },

        mounted: function () {

        },

        created: function () {

        },
        name: "MissYou"
    }
</script>

<style scoped>

</style>
